<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="A tree view that presents a hierarchical view of information. The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>TreeView - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">TreeView</a></li>
                    <li class="toc-entry"><a href="#_treeview_about">About</a></li>
                    <li class="toc-entry"><a href="#_treeview_add_node">Create node</a></li>
                    <li class="toc-entry">
                        <a href="#_treeview_inputs">Add inputs</a>
                        <ul>
                            <li class="toc-entry"><a href="#_treeview_inputs_checkbox">Checkbox</a></li>
                            <li class="toc-entry"><a href="#_treeview_inputs_radio">Radio</a></li>
                            <li class="toc-entry"><a href="#_treeview_inputs_switch">Switch</a></li>
                            <li class="toc-entry"><a href="#_treeview_inputs_input">Input</a></li>
                            <li class="toc-entry"><a href="#_treeview_inputs_select">Select</a></li>
                            <li class="toc-entry"><a href="#_treeview_inputs_textarea">Textarea</a></li>
                        </ul>
                    </li>
                    <li class="toc-entry"><a href="#_treeview_options_tree">Options tree</a></li>
                    <li class="toc-entry"><a href="#_treeview_events">Events</a></li>
                    <li class="toc-entry"><a href="#_treeview_methods">Methods</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>TreeView</h1>
                <p class="text-leader">
                    A tree view that presents a hierarchical view of information. Create treeview simple and easy with Metro 4.
                </p>

                <!-- ads-html -->

                <h3 id="_treeview_about">About</h3>
                <p>
                    To creating <code>treeview</code> we use <code>&lt;ul&gt;</code> element with role <code>data-role="treeview"</code>.
                    Nodes are defined with <code>&lt;li&gt;</code> element.
                    To create <code>subtree</code> just add an <code>&lt;ul&gt;</code> inside the <code>&lt;li&gt;</code>.
                </p>
                <pre><code class="html">
                    &lt;ul data-role="treeview"&gt;
                        &lt;li&gt;...&lt;/li&gt;
                        ...
                        &lt;li&gt;...&lt;/li&gt;
                        &lt;ul&gt;
                            &lt;li&gt;...&lt;/li&gt;
                            ...
                            &lt;li&gt;...&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/ul&gt;
                </code></pre>

                <h3 id="_treeview_add_node">Add node</h3>
                <p>
                    <code>Node</code> is a <code>&lt;li&gt;</code> with special <code>data-*</code> attributes.
                    The attributes are define: <code>icon</code> and <code>caption</code> of node.
                </p>
                <pre><code class="html">
                    &lt;li data-icon="..." data-caption="..."&gt;&lt;/li&gt;
                </code></pre>

                <div class="example">
                    <ul data-role="treeview">
                        <li data-icon="<span class='mif-star-full fg-red'></span>" data-caption="Favorites">
                            <ul>
                                <li data-icon="<span class='mif-library fg-green'></span>" data-caption="Projects"></li>
                                <li data-icon="<span class='mif-download fg-cyan'></span>" data-caption="Downloads"></li>
                                <li data-icon="<img src='images/desktop.png'>" data-caption="Desktop"></li>
                            </ul>
                        </li>
                        <li data-icon="<span class='mif-onedrive'></span>" data-caption="OneDrive">
                            <ul>
                                <li data-caption="Documents"></li>
                                <li data-caption="Projects" data-collapsed="true">
                                    <ul>
                                        <li data-caption="Web"></li>
                                        <li data-caption="Android"></li>
                                        <li data-caption="Windows"></li>
                                        <li data-caption="iOS"></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <pre><code class="html">
                    &lt;ul data-role="treeview"&gt;
                        &lt;li data-icon="&lt;span class='mif-star-full'&gt;&lt;/span&gt;" data-caption="Favorites"&gt;
                            &lt;ul&gt;
                                &lt;li data-icon="&lt;span class='mif-library'&gt;&lt;/span&gt;" data-caption="Projects"&gt;&lt;/li&gt;
                                &lt;li data-icon="&lt;span class='mif-download'&gt;&lt;/span&gt;" data-caption="Downloads"&gt;&lt;/li&gt;
                                &lt;li data-icon="&lt;img src='images/desktop.png'&gt;" data-caption="Desktop"&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li data-icon="&lt;span class='mif-onedrive'&gt;&lt;/span&gt;" data-caption="OneDrive"&gt;
                            &lt;ul&gt;
                                &lt;li data-caption="Documents"&gt;&lt;/li&gt;
                                &lt;li data-caption="Projects" data-collapsed="true"&gt;
                                    &lt;ul&gt;
                                        &lt;li data-caption="Web"&gt;&lt;/li&gt;
                                        &lt;li data-caption="Android"&gt;&lt;/li&gt;
                                        &lt;li data-caption="Windows"&gt;&lt;/li&gt;
                                        &lt;li data-caption="iOS"&gt;&lt;/li&gt;
                                    &lt;/ul&gt;
                                &lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                </code></pre>

                <h3 id="_treeview_inputs">Add inputs</h3>
                <p>
                    You can add input controls into treeview nodes. A <strong>prerequisite</strong> is the need to put each <code>input</code> in a separate <code>&lt;li&gt;</code>.
                </p>
                <br>
                <h6 id="_treeview_inputs_checkbox">Checkbox</h6>
                <pre><code class="html">
                    &lt;li&gt;&lt;input type="checkbox" data-role="checkbox"&gt;&lt;/li&gt;
                </code></pre>

                <h6 id="_treeview_inputs_radio">Radio</h6>
                <pre><code class="html">
                    &lt;li&gt;&lt;input type="radio" data-role="radio"&gt;&lt;/li&gt;
                </code></pre>

                <h6 id="_treeview_inputs_switch">Switch</h6>
                <pre><code class="html">
                    &lt;li&gt;&lt;input type="checkbox" data-role="switch"&gt;&lt;/li&gt;
                </code></pre>

                <h6 id="_treeview_inputs_input">Input</h6>
                <pre><code class="html">
                    &lt;li&gt;&lt;input type="text" data-role="input"&gt;&lt;/li&gt;
                </code></pre>

                <h6 id="_treeview_inputs_select">Select</h6>
                <pre><code class="html">
                    &lt;li&gt;&lt;select data-role="select"&gt;...&lt;/select&gt;&lt;/li&gt;
                </code></pre>

                <h6 id="_treeview_inputs_textarea">Textarea</h6>
                <pre><code class="html">
                    &lt;li&gt;&lt;textarea data-role="textarea"&gt;&lt;/textarea&gt;&lt;/li&gt;
                </code></pre>

                <div class="example">
                    <ul data-role="treeview">
                        <li class="expanded" data-caption="Checkboxes">
                            <ul>
                                <li><input type="checkbox" data-role="checkbox" data-caption="Play animation" title=""></li>
                                <li><input type="checkbox" data-role="checkbox" data-caption="Play sound" checked="checked" title=""></li>
                                <li><input type="checkbox" data-role="checkbox" data-caption="Disabled" disabled title=""></li>
                                <li><input type="checkbox" data-role="checkbox" data-caption="Disabled checked" checked disabled title=""></li>
                            </ul>
                        </li>
                        <li class="expanded" data-caption="Radios">
                            <ul>
                                <li><input type="radio" name="r1" data-role="radio" data-caption="Play animation" title=""></li>
                                <li><input type="radio" name="r1" data-role="radio" data-caption="Play sound" checked title=""></li>
                                <li><input type="radio" data-role="radio" data-caption="Disabled" disabled title=""></li>
                                <li><input type="radio" data-role="radio" data-caption="Disabled checked" checked disabled title=""></li>
                            </ul>
                        </li>
                        <li class="expanded" data-caption="Switches">
                            <ul>
                                <li><input type="checkbox" data-role="switch" data-caption="Play animation" title=""></li>
                                <li><input type="checkbox" data-role="switch" data-caption="Play sound" checked title=""></li>
                                <li><input type="checkbox" data-role="switch" data-caption="Disabled" disabled title=""></li>
                                <li><input type="checkbox" data-role="switch" data-caption="Disabled checked" checked disabled title=""></li>
                            </ul>
                        </li>
                        <li class="expanded" data-caption="Inputs">
                            <ul>
                                <li style="width: 220px"><input data-role="input" title=""></li>
                                <li style="width: 220px">
                                    <select data-role="select" title="">
                                        <option>Value 1</option>
                                        <option>Value 2</option>
                                        <option>Value 3</option>
                                    </select>
                                </li>
                                <li style="width: 220px"><textarea data-role="textarea" title=""></textarea></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <pre><code class="html">
                    &lt;ul data-role="treeview"&gt;
                        &lt;li class="expanded" data-caption="Checkboxes"&gt;
                            &lt;ul&gt;
                                &lt;li&gt;&lt;input type="checkbox" data-role="checkbox" data-caption="Play animation"&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;input type="checkbox" data-role="checkbox" data-caption="Play sound" checked&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;input type="checkbox" data-role="checkbox" data-caption="Disabled" disabled&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;input type="checkbox" data-role="checkbox" data-caption="Disabled checked" checked disabled&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li class="expanded" data-caption="Radios"&gt;
                            &lt;ul&gt;
                                &lt;li&gt;&lt;input type="radio" name="r1" data-role="radio" data-caption="Play animation"&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;input type="radio" name="r1" data-role="radio" data-caption="Play sound" checked&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;input type="radio" data-role="radio" data-caption="Disabled" disabled&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;input type="radio" data-role="radio" data-caption="Disabled checked" checked disabled&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li class="expanded" data-caption="Switches"&gt;
                            &lt;ul&gt;
                                &lt;li&gt;&lt;input type="checkbox" data-role="switch" data-caption="Play animation"&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;input type="checkbox" data-role="switch" data-caption="Play sound" checked&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;input type="checkbox" data-role="switch" data-caption="Disabled" disabled&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;input type="checkbox" data-role="switch" data-caption="Disabled checked" checked disabled&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li class="expanded" data-caption="Inputs"&gt;
                            &lt;ul&gt;
                                &lt;li style="width: 220px"&gt;&lt;input type="text" data-role="input"&gt;&lt;/li&gt;
                                &lt;li style="width: 220px"&gt;
                                    &lt;select data-role="select"&gt;
                                        &lt;option value="1"&gt;Value 1&lt;/option&gt;
                                        &lt;option value="2"&gt;Value 2&lt;/option&gt;
                                        &lt;option value="3"&gt;Value 3&lt;/option&gt;
                                    &lt;/select&gt;
                                &lt;/li&gt;
                                &lt;li style="width: 220px"&gt;&lt;textarea data-role="textarea"&gt;&lt;/textarea&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                </code></pre>

                <h3 id="_treeview_options_tree">Options tree</h3>
                <p>
                    If you need to create <code>options tree</code>, you can deal with this easy with Metro 4 <code>treeview</code> component.
                    <strong>You do not need any special actions, just add the checkboxes to nodes</strong>. <code>Indeterminate</code> state for checkboxes will be enabled automatically.
                </p>
                <div class="example">
                    <ul data-role="treeview">
                        <li>
                            <input type="checkbox" data-role="checkbox" data-caption="Play video" title="">
                            <ul>
                                <li><input type="checkbox" data-role="checkbox" data-caption="AVI" title=""></li>
                                <li><input type="checkbox" data-role="checkbox" data-caption="MPEG" title=""></li>
                                <li><input checked type="checkbox" data-role="checkbox" data-caption="VIDX" title=""></li>
                                <li><input type="checkbox" data-role="checkbox" data-caption="MP4" title=""></li>
                                <li><input checked type="checkbox" data-role="checkbox" data-caption="XVID" title=""></li>
                            </ul>
                        </li>
                        <li><input type="checkbox" data-role="checkbox" data-caption="Play audio" title=""></li>
                        <li>
                            <input type="checkbox" data-role="checkbox" data-caption="Subtitles" title="">
                            <ul>
                                <li><input type="checkbox" data-role="checkbox" data-caption="English" title=""></li>
                                <li><input checked type="checkbox" data-role="checkbox" data-caption="Ukrainian" title=""></li>
                                <li><input type="checkbox" data-role="checkbox" data-caption="Dutch" title=""></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <pre><code class="html">
                    &lt;ul data-role="treeview"&gt;
                        &lt;li&gt;
                            &lt;input type="checkbox" data-role="checkbox" data-caption="Play video" title=""&gt;
                            &lt;ul&gt;
                                &lt;li&gt;&lt;input type="checkbox" data-role="checkbox" data-caption="AVI" title=""&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;input type="checkbox" data-role="checkbox" data-caption="MPEG" title=""&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;input checked type="checkbox" data-role="checkbox" data-caption="VIDX" title=""&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;input type="checkbox" data-role="checkbox" data-caption="MP4" title=""&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;input checked type="checkbox" data-role="checkbox" data-caption="XVID" title=""&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;input type="checkbox" data-role="checkbox" data-caption="Play audio" title=""&gt;&lt;/li&gt;
                        &lt;li&gt;
                            &lt;input type="checkbox" data-role="checkbox" data-caption="Subtitles" title=""&gt;
                            &lt;ul&gt;
                                &lt;li&gt;&lt;input type="checkbox" data-role="checkbox" data-caption="English" title=""&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;input checked type="checkbox" data-role="checkbox" data-caption="Ukrainian" title=""&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;input type="checkbox" data-role="checkbox" data-caption="Dutch" title=""&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                </code></pre>

                <!-- ads-html -->

                <h3 id="_treeview_events">Events</h3>
                <p>
                    When <code>treeview</code> works, it generated the numbers of events. You can use callback for this events to behavior with <code>treeview</code>.
                </p>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Event</th>
                        <th>Data-*</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>onNodeClick(node, tree)</td>
                        <td><code>data-on-node-click</code></td>
                        <td>Fired when user click on node caption</td>
                    </tr>
                    <tr>
                        <td>onNodeDblClick(node, tree)</td>
                        <td><code>data-on-node-dblclick</code></td>
                        <td>Fired when user dblclick on node caption</td>
                    </tr>
                    <tr>
                        <td>onNodeInsert(node, tree)</td>
                        <td><code>data-on-node-insert</code></td>
                        <td>Fired when node was inserted</td>
                    </tr>
                    <tr>
                        <td>onNodeDelete(node, tree)</td>
                        <td><code>data-on-node-delete</code></td>
                        <td>Fired when node was deleted</td>
                    </tr>
                    <tr>
                        <td>onNodeClean(node, tree)</td>
                        <td><code>data-on-node-clean</code></td>
                        <td>Fired when node was cleaned</td>
                    </tr>
                    <tr>
                        <td>onCheckClick(state, check, node, tree)</td>
                        <td><code>data-on-check-click</code></td>
                        <td>Fired when user click on checkbox</td>
                    </tr>
                    <tr>
                        <td>onRadioClick(state, check, node, tree)</td>
                        <td><code>data-on-radio-click</code></td>
                        <td>Fired when user click on radio input</td>
                    </tr>
                    <tr>
                        <td>onExpandNode(node, tree)</td>
                        <td><code>data-on-expand-node</code></td>
                        <td>Fired when node was expanded</td>
                    </tr>
                    <tr>
                        <td>onCollapseNode(node, tree)</td>
                        <td><code>data-on-collapse-node</code></td>
                        <td>Fired when node was collapsed</td>
                    </tr>
                    <tr>
                        <td>onTreeviewCreate(node, tree)</td>
                        <td><code>data-on-treeview-create</code></td>
                        <td>Fired when tree was created</td>
                    </tr>
                    </tbody>
                </table>

                <h3 id="_treeview_methods">Methods</h3>
                <p>
                    You can use <code>treeview</code> methods to interact with the component.
                </p>
                <ul>
                    <li><strong>toggleNode(node)</strong> - toggle node state</li>
                    <li><strong>addTo(node, data)</strong> - add child node</li>
                    <li><strong>insertBefore(node, data)</strong> - add new node before specified node</li>
                    <li><strong>insertAfter(node, data)</strong> - add new node after specified node</li>
                    <li><strong>del(node)</strong> - delete node from tree</li>
                    <li><strong>clean(node)</strong> - clean node</li>
                </ul>

                <div class="example">
                    <button class="button" onclick="
                        $('#tv_1').data('treeview').addTo(null, {
                            caption: 'New node',
                            icon: '<span class=\'mif-air\'></span>'
                        })
                    ">Add node</button>

                    <button class="button" onclick="
                        var tv = $('#tv_1');
                        tv.data('treeview').addTo(tv.find('.current'), {
                            caption: 'New node'
                        })
                    ">Add subnode</button>

                    <button class="button" onclick="
                        var tv = $('#tv_1');
                        tv.data('treeview').addTo(tv.find('.current'), {
                            html: '<input data-role=checkbox data-caption=Checkbox>'
                        })
                    ">Add checkbox</button>

                    <button class="button" onclick="
                        var tv = $('#tv_1');
                        tv.data('treeview').insertBefore(tv.find('.current'), {
                            caption: 'Before node'
                        })
                    ">Insert before</button>

                    <button class="button" onclick="
                        var tv = $('#tv_1');
                        tv.data('treeview').insertAfter(tv.find('.current'), {
                            caption: 'After node'
                        })
                    ">Insert after</button>

                    <button class="button" onclick="
                        var tv = $('#tv_1');
                        tv.data('treeview').del(tv.find('.current'))
                    ">Delete</button>

                    <button class="button" onclick="
                        var tv = $('#tv_1');
                        tv.data('treeview').clean(tv.find('.current'))
                    ">Clear</button>

                    <hr>

                    <ul data-role="treeview" id="tv_1"></ul>
                </div>
                <pre><code class="html">
                    &lt;button class="button" onclick="
                        $('#tv_1').data('treeview').addTo(null, {
                            caption: 'New node',
                            icon: '&lt;span class=\'mif-air\'&gt;&lt;/span&gt;'
                        })
                    "&gt;Add node&lt;/button&gt;

                    &lt;button class="button" onclick="
                        $('#tv_1').data('treeview').addTo($('#tv_1').find('.current'), {
                            caption: 'New node'
                        })
                    "&gt;Add subnode&lt;/button&gt;

                    &lt;button class="button" onclick="
                        var tv = $('#tv_1');
                        tv.data('treeview').addTo(tv.find('.current'), {
                            html: '&lt;input data-role=checkbox data-caption=Checkbox&gt;'
                        })
                    "&gt;Add checkbox&lt;/button&gt;

                    &lt;button class="button" onclick="
                        $('#tv_1').data('treeview').insertBefore($('#tv_1').find('.current'), {
                            caption: 'Before node'
                        })
                    "&gt;Insert before&lt;/button&gt;

                    &lt;button class="button" onclick="
                        $('#tv_1').data('treeview').insertAfter($('#tv_1').find('.current'), {
                            caption: 'After node'
                        })
                    "&gt;Insert after&lt;/button&gt;

                    &lt;button class="button" onclick="
                        $('#tv_1').data('treeview').del($('#tv_1').find('.current'))
                    "&gt;Delete&lt;/button&gt;

                    &lt;button class="button" onclick="
                        $('#tv_1').data('treeview').clean($('#tv_1').find('.current'))
                    "&gt;Clear&lt;/button&gt;

                    &lt;hr&gt;

                    &lt;ul data-role="treeview" id="tv_1"&gt;&lt;/ul&gt;
                </code></pre>
            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>